<template>
  <div class="sign">
    <form @submit.prevent="showText">
      <div class="messagebox">
        <ul>
          <li>
            <span>我的名字：</span>
            <input type="text" v-model="formObj.name" placeholder="姓名">
          </li>
          <li>
            <span>我的号码：</span>
            <input type="text"  v-model="formObj.telNumber" placeholder="11位手机号码">
          </li>
          <li>
            <span>备注信息：</span>
            <textarea  v-model="formObj.messageText"  placeholder="输入备注"></textarea>
          </li>
        </ul>
      </div>
      <input type="submit"  class="bbtninfo" value="提交留言">
    </form>
  </div>
</template>

<script>
export default {
  name: 'homeSign',
  data () {
    return {
      formObj: {
        name: '',
        telNumber: '',
        messageText: '',
        messageDetail: ''
      }
    }
  },
  methods: {
    showText (e) {
      // console.log(e)
      if (!this.formObj.name) {
        console.log('输入姓名为空')
        alert('请填写姓名')
        return false
      }
      if (!this.formObj.telNumber) {
        console.log('输入的电话为空')
        alert('请填写电话')
        return false
      }
      if (!this.formObj.messageText) {
        console.log('输入的信息为空')
        alert('请填写备注')
        return false
      }
      this.$ajax({
        method: 'post',
        url: 'api/orderRemark/addRemark',
        headers: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          name: this.formObj.name,
          tel: this.formObj.telNumber,
          remarks: this.formObj.messageText
        },
        transformRequest: [function (data) {
          let ret = ''
          for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
          }
          return ret
        }]
      }).then((res) => {
        console.log(res.data)
      })
      this.messageDetail = this.formObj.name + this.formObj.telNumber + this.formObj.messageText
      console.log(this.messageDetail)
      this.formObj.name = ''
      this.formObj.telNumber = ''
      this.formObj.messageText = ''
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~css/vueitem.scss";
  .sign{
    background: $brand-white;
  }
.messagebox{
  text-align: center;
  >ul{
    >li{
      box-sizing: border-box;
      @include container-width-height(100%,35px);
      margin: 3px 0;
      >span{
        display: block;
        float: left;
        @include container-width-height(25%,35px);
        @include text-variant(14px,$color-gray-item2,right);
        line-height: 35px;
      }
      >input{
        @include container-width-height(70%,35px);
        border: none;
        @include text-variant(14px,$color-gray-item2,left);
      }
      >textarea{
        float: right;
        display: block;
        @include container-width-height(70%,105px);
        border: none;
        @include text-variant(14px,$color-gray-item2,left);
      }
      &:last-child{
        @include container-width-height(100%,105px);
      }
    }
  }
}
.bbtninfo{
  display: block;
  @include container-width-height(80%,35px);
  margin: 0 auto;
  background: $color-green-item1;
  border: none;
  border-radius: 5px;
  @include text-variant(16px,$brand-white,center);
}
</style>
